import React, {Component} from 'react'
import PlayBar from './playBar/PlayBar'
import './play.styl'
import localStorage from 'utils/storage'
import {findDOMNode} from 'react-dom'
class Play extends Component {
    constructor(props) {
        super(props)
        this.state = {
            songList: this.props.playSong,
            playStatus: true,
            playIndex: localStorage.getPlayIndex(),
            currentTime: 0,
            duration: 0

        }
    }
    componentDidMount () {
        this.SongImg =  findDOMNode(this.refs.songImg)
        this.audionDom =  findDOMNode(this.refs.audion)

        this.audionDom.addEventListener('canplay', () => {
            this.audionDom.play()
            this.setState({
                duration: this.audionDom.duration
            })

        },false)

        this.audionDom.addEventListener('timeupdate', () => {
            this.setState({
                currentTime: this.audionDom.currentTime
            })
        })

        this.audionDom.addEventListener('ended', () => {

            let index = this.state.playIndex
            this.setState({
                playIndex: ++index,
                playStatus: true
            }, () => {
                this.props.setSong(this.state.songList[this.state.playIndex], this.state.playIndex)
                this.audionDom.play()
            })
        })

        this.audionDom.addEventListener("error", () => {alert("加载歌曲出错！")}, false)

    }
    //切换歌曲
    changeCurrentSong (type) {
        let index = this.state.playIndex
        // 判断边界情况，当前歌曲是最后一首歌时，点击下一首则播放第一首，而当前歌曲是第一首时，点击上一首则播放最后一首
        if (index === 0 && type === 'pre') {
            index = this.state.songList.length
        }
        if (index === this.state.songList.length - 1 && type === 'next') {
            index = 1
        }
        this.setState({
            playIndex: type === 'next' ? ++index : --index,
            playStatus: true
        }, () => {
            this.props.setSong(this.state.songList[this.state.playIndex], this.state.playIndex)
            this.rotateImg()
        })
    }

    // 暂停或播放
    playOrPause () {
        let status = this.state.playStatus

        this.setState({
            playStatus: !status
        }, () => {
            if (this.state.playStatus) {
                this.rotateImg()
                this.audionDom.play()
            } else {
                this.stopRotateImg()
                this.audionDom.pause()
            }
        })
    }
    // 旋转动画
    rotateImg () {
        this.SongImg.style["webkitAnimationPlayState"] = "running";
        this.SongImg.style["animationPlayState"] = "running";
    }
    // 停止动画
    stopRotateImg () {
        this.SongImg.style["webkitAnimationPlayState"] = "paused";
        this.SongImg.style["animationPlayState"] = "paused";
    }

    render() {
        let {currentSong} = this.props
        // if (this.audionDom) {
        //     this.audionDom.src = currentSong.url
        //     // this.audionDom.load()
        // }
        return (
            <div className='play'>
                <div className='bg' style={{backgroundImage: 'url(' + currentSong.img +')'}}>
                    <div className='mask'></div>
                </div>
                <div className='play_header'>
                    <i className='iconfont icon-jiantou' onClick={() => {window.history.back();}}></i>
                    <span>{currentSong.albumname}</span>
                </div>
                <div className='singer'>
                    - {
                        currentSong.singer.map((val, index) => (
                            <span key={index}>{val.name}
                                <span style={{ display :index === currentSong.singer.length - 1 ? 'none' : ''}}> / </span>
                            </span>
                        ))
                    } -
                </div>
                <div className='radioImg' >
                    <img ref='songImg' src={currentSong.img} alt='' />
                </div>
                <audio ref="audion" src={currentSong.url} controls="controls" loop={false} hidden={true}>
                </audio>
                <PlayBar duration={this.state.duration}
                         currentTime={this.state.currentTime}
                         playStatus={this.state.playStatus} song={currentSong}
                         nextSong={() =>this.changeCurrentSong('next')}
                         preSong={() => this.changeCurrentSong('pre')}
                         playOrPause={() =>this.playOrPause()}>

                </PlayBar>
            </div>
        )
    }
}

export default Play